<!--  -->
<template>
  <div class="capital-detail">
    <Nav title="资金明细">
      <template v-slot:left>
        <span class="back" @click=" $router.back()"></span>
      </template>
    </Nav>
    <TabCommon :tabs.sync="tabs" :tabIndex.sync="tabIndex" @tabChange="tabChange"></TabCommon>
    <div class="order-list-wrapper">
      <Scroll
        :preventDefault="true"
        :click="true"
        :tap="true"
        :pullup="true" 
        :pulldown="true"
        @scrollToEnd="scrollToEnd"
        :data.sync="capitalList"
        ref="myScroll"
      >
        <div>
          <template v-for="(item,index) in capitalList">
            <div class="capital-item ml-20" :key="index">
              <div class="flex justify-between f-17">
                <span>{{item.from_type==1?'消费':item.from_type==8?'提现':'全部'}}</span>
                <span :class="[item.sign==0?'color-green':'']">{{item.sign==0?'-':'+'}}{{item.number}}</span>
              </div>
              <div class="flex justify-between f-14 mt-10">
                <span>{{item.create_time}}</span>
                <!-- <span>待审核</span> -->
              </div>
            </div>
          </template>
          <div class="loading-bottom mt-10 f-14" v-if="loading">加载中...</div>
          <div class="loading-bottom mt-10 f-14" v-if="noMore">没有更多了</div>
        </div>
      </Scroll>
    </div>
  </div>
</template>

<script>
import Nav from "../../components/Nav";
import TabCommon from "../../components/OrderTab";
import Scroll from "../../components/Scroll";
import Page from "../../mixin/page";
import { userAccounts } from "../../api/api";
export default {
  mixins: [Page],
  components: { Nav, TabCommon, Scroll },
  data() {
    return {
      capitalList: [], //资金明细列表
      tabs: ["全部", "提现", "消费"],
      tabIndex: 0
    };
  },
  computed: {
    c_type() {
      switch (this.tabIndex) {
        case 0:
          return 10;
        case 1:
          return 8;
        case 2:
          return 1;
      }
    }
  },
  watch: {},
  methods: {
    _api() {
      userAccounts({
        page: this.current_page + 1,
        type: this.c_type
      }).then(({ data: { result } }) => {
        if (result && result.length != 0) {
          this.capitalList = [...this.capitalList, ...result];
          this.current_page += 1;
          this.last_page = this.current_page + 1;
        } else {
          this.last_page = this.current_page;
        }
        this.loading = false;
      });
    },
    tabChange(index) {
      if (this.tabIndex != index) {
        this.tabIndex = index;
          //重置
        this.current_page = 0;
        this.last_page = 1;
        this.loading = false;
        this.capitalList = [];
        this._api();
      }
    }
  },
  created() {},
  mounted() {
    // this._api()
  },
  updated() {}, //生命周期 - 更新之后
  destroyed() {} //生命周期 - 销毁完成
};
</script>
<style lang='less' scoped>
//@import url(); 引入公共css类
.color-yellow {
  color: #e4ac02;
}
.color-green {
  color: #188a10;
}
.f-17 {
  font-size: 17px;
}
.capital-detail {
  height: 100%;
  .order-list-wrapper {
    height: calc(100% - 89px);
    overflow: hidden;
    .capital-item {
      padding: 20px 20px 20px 0;
      border-bottom: 1px solid #bcbcbc;
    }
  }
}
.loading-bottom {
  width: 100%;
  text-align: center;
}
</style>